<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<!--
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
<body>
<!--    准备一个容器-->
<div id="root">
    <h2>人员列表</h2>
    <ul>
<!-- v-for类似与循环  in of 都行   遍历数组   -->
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

<!--    遍历对象-->
    <h2>汽车信息</h2>
    <ul>
<!--        不能换位置，位置固定-->
        <li v-for="(value,k) in car" :key="k">
            {{value}}--{{k}}
        </li>
    </ul>
<!--遍历字符串-->
    <h2>遍历字符串</h2>
    <ul>
<!--        char 字符  index 索引-->
        <li v-for="(char,index) in str" :key="index" >
            {{char}}--{{index}}
        </li>
    </ul>
</div>
</body>
<script>
    Vue.config.productionTip = false

new Vue({
    el:'#root',
    data:{
        persons:[{
            id:'001',name:'张三',age:18
        },{
            id:'002',name:'李四',age:19
        },{
            id:'003',name:'王五',age:20
        }],

        car:{
            name:'奥迪',
            price:'30万',
            age:'2020'
        },
        str:'hello'
    },

})
</script>
</html>